<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4682916_jm4016isa4l.css">
	<style>
		/* css重置化：消除浏览器的默认样式，保证浏览器渲染网页的一致性 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font: 14px/1.5 Helvetica Neue, Helvetica, Arial,
				Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
		}

		.box {
			width: 234px;
			height: 460px;
			background-color: #716963;
			margin: 100px auto;
			padding: 20px 0;

		}

		li {
			/* 弹性布局 */
			display: flex;
			align-items: center;
			/* 左右并齐 */
			justify-content: space-between;
			height: 42px;
			list-style-type: none;
			padding-left: 30px;
			padding-right: 26px;
			font-size: 14px;
			color: #fff;
		}

		li:hover {
			background-color: #ff6700;
			cursor: pointer;
		}

		.icon-ico-right-arrow {
			font-size: 12px;
		}
	</style>
</head>

<body>
	<div class="box">
		<ul>
			<li>
				<span>手机</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>电视</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>家电</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>笔记本 平板 显示器</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>出行</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>耳机</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>健康</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>生活</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>智能</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
			<li>
				<span>电源</span>
				<span class="iconfont icon-ico-right-arrow"></span>
			</li>
		</ul>
	</div>
</body>

</html>